<template>
  <div class="collected-questions-container">
    <div class="content-wrapper">
      <div class="title-box">
        <h2>我的收藏题目</h2>
      </div>
      <div v-if="loading" class="message-box">加载中...</div>
      <div v-else-if="error" class="message-box">{{ error }}</div>
      <div v-else>
        <div v-if="collectedQuestions.length">
          <transition-group name="list" tag="div" class="questions-list">
            <div v-for="question in collectedQuestions" :key="question.question_id" class="question-box">
              <div class="question-content">
                <h3 class="question">{{ question.question }}</h3>
                <p class="option">{{ question.optionA }}</p>
                <p class="option">{{ question.optionB }}</p>
                <p class="option">{{ question.optionC }}</p>
                <p class="option">{{ question.optionD }}</p>
                <p class="answer">答案: {{ question.answer }}</p>
              </div>
              <button @click="uncollectQuestion(question.question_id)" class="uncollect-button">
                <span class="uncollect-icon">&#x2715;</span>
              </button>
            </div>
          </transition-group>
        </div>
        <p v-else class="message-box">你还没有收藏任何题目。</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { BASE_URL } from '@/config.js';
export default {
  data() {
    return {
      collectedQuestions: [],
      loading: true,
      error: null,
    }
  },
  created() {
    this.fetchCollectedQuestions();
  },
  methods: {
    async fetchCollectedQuestions() {
      const userId = localStorage.getItem('userId');
      if (!userId) {
        this.error = '用户未登录';
        this.loading = false;
        return;
      }

      try {
        const response = await axios.get(`${BASE_URL}/api/collected-questions/${userId}`);
        this.collectedQuestions = response.data;
        this.loading = false;
      } catch (error) {
        console.error('Error fetching collected questions:', error);
        this.error = '获取收藏题目失败，请稍后再试';
        this.loading = false;
      }
    },
    async uncollectQuestion(questionId) {
      const userId = localStorage.getItem('userId');
      try {
        await axios.delete(`${BASE_URL}/api/uncollect`, {
          data: { userId, questionId }
        });
        this.collectedQuestions = this.collectedQuestions.filter(q => q.question_id !== questionId);
        alert('已成功取消收藏');
      } catch (error) {
        console.error('Error uncollecting question:', error);
        alert('取消收藏失败，请稍后再试');
      }
    }
  }
}
</script>

<style scoped>
.collected-questions-container {
background-image: url('@/assets/s5.jpg'); 
background-repeat: no-repeat; /* 背景图不重复 */
background-size: cover; /* 背景图覆盖整个区域 */
background-position: center; /* 背景图居中 */
background-attachment: fixed; /* 背景图固定 */
  max-width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 70px 20px;
  /* font-family: Arial, sans-serif; */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.content-wrapper {
  width: 100%;
  max-width: 800px;
  /* background: rgba(255, 255, 255, 0.7); */
  border-radius: 30px;
  padding: 40px;
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
}

.title-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 10px;
  /* background: linear-gradient(45deg, #5e4b3c, #8b4513);  */
  border-radius: 20px;
  padding: 15px 30px;
}

.title-box h2 {
  color: #be682b;
  font-size: 2.5em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  margin: 0;
}


.questions-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.question-box {
  background: rgba(45, 45, 45, 0.9);
  font-family: Arial, sans-serif;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(15px);
  padding: 25px;
  position: relative;
}

.question-content {
  position: relative;
  z-index: 1;
}

.question {
  color: #f5e4c3;
  font-family: Arial, sans-serif;
  font-size: 1.3em;
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.option {
  color: #6f2e2e;
  margin: 10px 0;
  padding: 8px 15px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.option:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.answer {
  color: #a92929;
  font-weight: bold;
  margin-top: 20px;
  font-size: 1.1em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.message-box {
  text-align: center;
  color: #333;
  font-size: 1.2em;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
}

.uncollect-button {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 10px;
  background-color: rgba(203, 89, 77, 0.8);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  overflow: hidden;
  backdrop-filter: blur(5px);
  z-index: 2;
}

.uncollect-button:hover
{
  width: auto;
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 1em;
}

.uncollect-icon {
  font-size: 1.2em;
}

.uncollect-button:hover .uncollect-text,
.question-box:hover .uncollect-button .uncollect-text {
  display: inline;
}

.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}

.list-leave-active {
  position: absolute;
}

.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

@media (max-width: 768px) {
  .title-box {
    width: 100%;
    flex-direction: column;
    text-align: center;
  }
  
  .back-button {
    position: static;
    margin-bottom: 10px;
  }

  .content-wrapper {
    padding: 20px;
  }
}
</style>